<template>
	<span
		@click.stop
		style="display: contents"
		v-clipboard:copy="value"
		v-clipboard:success="onCopy"
		v-clipboard:error="onError">
		<slot>
			<base-icon name="share2" class="base-copy text-t-3 text-xl app-text-react" v-bind="$attrs" />
		</slot>
	</span>
</template>

<script setup lang="ts">
import BaseIcon from '@/components/base/icon/index.vue'
import { useMessage } from '@/hooks/'
import { t } from '@/utils'

const message = useMessage()

const props = defineProps({
	value: {
		type: [String, Number],
		default: ''
	},
	showContent: {
		type: Boolean,
		default: false
	},
	successMsg: {
		type: [String]
	}
})

const onCopy = () => {
	if (props.successMsg) {
		message.success(t(props.successMsg))
	} else {
		message.success(t('tip.copySuccess') + (props.showContent ? ': ' + props.value : ''))
	}
}

const onError = () => {
	message.error(t('tip.copyError'))
}
</script>
